<template>
  <div>
    <a-card :bordered="false" class="ant-pro-components-tag-select">
      <a-drawer
        :title="title"
        :placement="placement"
        :closable="true"
        :visible="visible"
        @close="onClose"
        height="100%">
        <a-form :form="form" layout="inline">
          <standard-form-row title="一级分类" block style="padding-bottom: 3px;">
            <a-form-item>
              <tag-select @change="tagOneChange" :hideCheckAll="true" :singleCheck="true">
                <tag-select-option v-for="(item,index) in levelOne" :key="index" :value="item.id">{{ item.name }}</tag-select-option>
              </tag-select>
            </a-form-item>
          </standard-form-row>
          <standard-form-row title="二级分类" block style="padding-bottom: 2px;">
            <a-form-item>
              <tag-select :hideCheckAll="true" @change="tagTwoChange">
                <tag-select-option v-if="levelTwo.length>0" v-for="(item,index) in levelTwo" :key="index" :value="item.id">{{ item.name }}</tag-select-option>
              </tag-select>
            </a-form-item>
          </standard-form-row>
        </a-form>

        <div class="ant-pro-pages-list-projects-cardList">
          <a-list :loading="loading" :data-source="tempDate" :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
            <a-list-item slot="renderItem" slot-scope="item">
              <a-card class="ant-pro-pages-list-projects-card" hoverable>
                <img slot="cover" :src="item.cover" :alt="item.name" />
                <a-card-meta :title="item.name">
                  <template slot="description">
                    <ellipsis :length="50">{{ item.templateDesc }}</ellipsis>
                  </template>
                </a-card-meta>
                <div class="cardItemContent">
                  <!-- <span>{{ item.gmtCreate | fromNow }}</span> -->
                  <span>售价：{{ item.price }}元</span>
                  <span>作者：{{ item.developerName }}</span>
                  <span>联系方式：{{ item.developerContact }}</span>
                </div>
                <a-divider dashed />
                <a-switch
                  checked-children="安装并启用"
                  un-checked-children="未启用"
                  :defaultChecked="item.isDefault===1"
                  v-model="item.booleanUsing"
                  @change="starStop($event,item)" />
              </a-card>
            </a-list-item>
          </a-list>
        </div>
        <a-pagination
          v-model="pageNo"
          :total="total"
          :defaultPageSize="pageSize"
          show-less-items
          :hideOnSinglePage="true"
          @change="changePageNo" />
      </a-drawer>
    </a-card>
  </div>
</template>

<script>
  import moment from 'moment'
  import {
    getTempByPidType
  } from '@/api/site/templateType'
  import {
    inunstall
  } from '@/api/site/siteTemp'
  import {
    page
  } from '@/api/site/template'
  import {
    TagSelect,
    StandardFormRow,
    Ellipsis,
    AvatarList
  } from '@/components'
  const TagSelectOption = TagSelect.Option
  const AvatarListItem = AvatarList.Item

  export default {
    components: {
      AvatarList,
      AvatarListItem,
      Ellipsis,
      TagSelect,
      TagSelectOption,
      StandardFormRow
    },
    data () {
      return {
        data: [],
        form: this.$form.createForm(this),
        loading: false,
        visible: false,
        placement: 'top',
        title: '模板选择',
        levelOne: [],
        levelTwo: [],
        checkTypeIds: [],
        record: null,
        pageNo: 1,
        total: 1,
        pageSize: 12,
        tempDate: []
      }
    },
    filters: {
      fromNow (date) {
        return moment(date).fromNow()
      }
    },
    watch: {
      checkTypeIds (val, oldVal) { // 普通的watch监听
        this.getTempList(val)
      }
    },
    mounted () {
      // this.getTempList()
    },
    created () {
      this.loadType('0')
    },
    methods: {
      handleChange (value) {
        console.log(`selected ${value}`)
      },
      showDrawer (record) {
        this.record = record
        this.title = '【' + record.siteName + '】选择模板'
        this.visible = true
      },
      loadType (type) {
        getTempByPidType({
          pid: type
        }).then(response => {
          if (response.code === 0) {
            if (type === '0') {
              this.levelOne = response.res
            } else {
              this.levelTwo = response.res
            }
          }
        })
      },
      onClose () {
        this.visible = false
      },
      tagOneChange (e) {
        this.checkTypeIds = [e.value]
        this.levelTwo = []
        this.loadType(e.value)
      },
      tagTwoChange (e) {
        console.log(e)
        if (e.checked) {
          this.checkTypeIds.push(e.value)
        } else {
          const value = e.value
          var index = this.checkTypeIds.indexOf(value)
          if (index > -1) {
            this.checkTypeIds.splice(index, 1)
          }
        }
      },
      onChange (e) {
        this.placement = e.target.value
      },
      changePageNo (pageNo, pageSize) {
        this.pageNo = pageNo
        this.getTempList(this.checkTypeIds)
      },
      starStop (value, item) {
        const startUsing = value ? 1 : 0
        inunstall({
          siteId: this.record.id,
          templateId: item.id,
          startUsing: startUsing
        }).then(response => {
          if (response.code === 0) {
            if (value) {
              this.$message.info('恭喜您,模板安装成功!')
            } else {
              this.$message.info('模板已停用')
            }
            this.getTempList(this.checkTypeIds)
          } else {
            this.$message.error(response.msg)
          }
        })
      },
      getTempList (keys) {
        page({
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          dto: {
            typeIds: keys,
            siteId: this.record.id
          }
        }).then(response => {
          if (response.code === 0) {
            this.tempDate = response.res.rows
            this.total = response.res.total
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .ant-pro-components-tag-select {
    /deep/ .ant-pro-tag-select .ant-tag {
      margin-right: 24px;
      padding: 0 8px;
      font-size: 14px;
    }
  }

  .ant-pro-pages-list-projects-cardList {
    margin-top: 24px;

    /deep/ .ant-card-meta-title {
      margin-bottom: 4px;
    }

    /deep/ .ant-card-meta-description {
      height: 44px;
      overflow: hidden;
      line-height: 22px;
    }

    .cardItemContent {
      display: flex;
      height: 20px;
      margin-top: 16px;
      margin-bottom: -4px;
      line-height: 20px;

      >span {
        flex: 1 1;
        color: rgba(0, 0, 0, .45);
        font-size: 12px;
      }

      /deep/ .ant-pro-avatar-list {
        flex: 0 1 auto;
      }
    }
  }
</style>
